<template>
  <div class="financial-page container bg-black">
    <div class="financial-center">
      <div class="search-conditions">
        <el-form :inline="true" class="withdraw-form">
          <h2 style="margin-bottom: 15px;">财务中心</h2>
          <el-form-item style="margin-right: 30px;">
            <span>可提现金额</span><span style="margin-left: 15px">{{ availableBalance }}</span>
          </el-form-item>
          <el-form-item
            class="withdraw-money"
            label="提现"
          >
            <el-input v-model="withdrawMoney" />
            <span>元</span>
          </el-form-item>
          <el-form-item>
            <span>提现方式：</span><span>{{ withdrawalMethod }} </span>
          </el-form-item>
          <el-form-item>
            <div class="inline-inputs">
              <el-input
                v-model="alipayAccount"
                class="withdraw-account"
                placeholder="输入支付宝账号"
              />
              <span>-</span>
              <el-input
                v-model="alipayAccountName"
                class="withdraw-account-name"
                placeholder="账号实名"
              />
            </div>
          </el-form-item>
          <el-button
            style="height: 30px;
            padding: 9px 20px;
            margin-top: 5px;
            color: #fff;
            background: transparent;
            border: transparent;" type="primary" @click="withdraw">提现</el-button>
        </el-form>
      </div>
      <div style="border: 1px solid #595A5F;"></div>
      <div style="margin-top: 20px;background: #000;">
        <h4 style="margin-bottom: 15px;">交易记录</h4>
        <el-table :data="transactions">
          <el-table-column prop="rec_num" label="交易号" />
          <el-table-column prop="remark" label="内容" />
          <el-table-column
            prop="rec_tm"
            label="交易日期"
          />
          <el-table-column prop="typ" label="类型" />
          <el-table-column prop="amt" label="发生金额" />
          <el-table-column prop="bal" label="账户余额" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button style="background: transparent;border: transparent;" @click="handleFeedback(row.id)">
                反馈
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="background-color: transparent; margin-top:20px;text-align: right;">
        <el-pagination
          :page-size="pageSize"
          :pager-count="5"
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="反馈" width="30%">
      <el-form :model="form">
        <el-form-item label="内容">
          <el-input v-model="form.content" :rows="4" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitFeedback">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      availableBalance: 96.00,
      withdrawMoney: 0.0,
      withdrawalMethod: '支付宝',
      alipayAccount: '',
      alipayAccountName: '',
      total: 0,
      typeConfig: {
        1: '收入',
        2: '支出',
        3: '冻结',
        4: '解冻'
      },
      transactions: [],
      dialogFormVisible: false,
      form: {
        content: '',
        id: 0
      },
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted () {
    this.loadUserAccount()
    this.loadWithdrawList()
  },
  methods: {
    loadUserAccount () {
      this.$axios
        .post('/UserAcct/myAcct', {})
        .then(({ data }) => {
          this.availableBalance = data.cashed_bal
        })
    },
    loadWithdrawList () {
      this.$axios
        .post('/UserAcct/record', {
          page: this.currentPage,
          pageSize: this.pageSize
        })
        .then(({ data }) => {
          this.total = data.total
          const result = data.data.map((item) => {
            item.typ = this.typeConfig[item.typ]
            return item
          })
          this.transactions = result
        })
    },
    withdraw () {
      if (this.withdrawMoney <= 0) {
        alert('请输入提现金额')
        return
      }
      if (!this.alipayAccount) {
        alert('请输入支付宝账号')
        return
      }
      if (!this.alipayAccountName) {
        alert('请输入支付宝账号实名')
        return
      }
      this.$axios
        .post('/UserAcct/withdraw', {
          cash_amt: this.withdrawMoney,
          colle_info_acct: this.alipayAccount,
          colle_info_fullname: this.alipayAccountName
        })
        .then(({ data }) => {
          this.loadWithdrawList()
          alert('提现成功！')
        })
    },
    handleFeedback (id) {
      this.form.id = id
      this.dialogFormVisible = true
    },
    getWithdraw () {
    },
    submitFeedback () {
      if (!this.form.content) {
        this.$message.warning('请输入反馈内容')
        return
      }
      this.$axios
        .post('/UserAcct/addCashFeedBack', {
          content: this.form.content,
          id: this.form.id
        })
        .then(({ data }) => {
          alert('反馈成功！')
          // 关闭对话框并清空内容
          this.dialogFormVisible = false
          this.form.content = ''
        })
    },
    handlePageChange (page) {
      this.currentPage = page
      this.loadWithdrawList()
    }
  }
}
</script>

<style scoped>

.withdraw-form {
  color: #595A5F;
}

.inline-inputs {
  display: flex;
  gap: 10px;
}

:deep(.withdraw-money .el-input__inner) {
  background: transparent;
  background-color: #191919;
  width: 60px;
  height: 30px;
  border: 0px;
  text-align: center;
}

:deep(.withdraw-money .el-input) {
  width: 68px;
}

:deep(.withdraw-account .el-input__inner) {
  background: transparent;
  background-color: #191919;
  width: 150px;
  height: 30px;
  border: 0px;
  text-align: center;
}

:deep(.withdraw-account .el-input__inner::placeholder) {
  color: #595A5F;
}

:deep(.withdraw-account-name .el-input__inner) {
  background: transparent;
  background-color: #191919;
  width: 100px;
  height: 30px;
  border: 0px;
  text-align: center;
}

:deep(.withdraw-account-name .el-input__inner::placeholder) {
  color: #595A5F;
}

:deep(.el-table) {
  background-color: transparent !important; /* 表格整体背景 */
}

:deep(.el-table tr) {
  background-color: transparent !important; /* 表格行背景 */
}

:deep(.el-table th) {
  background-color: #191919 !important; /* 表头背景色 */
  color: #595A5F !important; /* 表头文字颜色 */
  border-bottom: 1px solid #595A5F !important; /* 表头底部边框 */
}

:deep(.el-table td) {
  /*background-color: #191919 !important; /* 单元格背景色 */
  color: #595A5F !important; /* 单元格文字颜色 */
  border-bottom: 1px solid #595A5F !important; /* 单元格底部边框 */
}
:deep(.el-table--border) {
  border: none !important;
}

/* 鼠标悬停效果 */
:deep(.el-table tbody tr:hover > td) {
  background-color: #2c2c2c !important; /* 悬停时的背景色 */
}

/* 去除表格的外边框 */
:deep(.el-table::before) {
  height: 0 !important;
}

/* 设置分页导航的背景色 */
:deep(.el-pagination) {
  background-color: transparent !important; /* 设置为透明 */
  color: #595A5F !important; /* 设置文字颜色 */
}

:deep(.el-pagination button) {
  background-color: transparent !important;
  color: #595A5F !important;
}

:deep(.el-pager li) {
  background-color: transparent !important;
  color: #595A5F !important;
}

/* 选中页码的样式 */
:deep(.el-pager li.active) {
  color: #409EFF !important; /* 或者其他你想要的高亮颜色 */
}

/* 鼠标悬停时的样式 */
:deep(.el-pager li:hover) {
  color: #409EFF !important;
}

/* 禁用按钮的样式 */
:deep(.el-pagination button:disabled) {
  background-color: transparent !important;
  color: #C0C4CC !important;
}
</style>
